<template>
  <div>
    <div id="head">
      <van-icon class="biao" size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      分项分析
    </div>
    <div style="margin-top: 10px; padding: 10px;">
      <div style="position:absolute;top: 60px;left: 30px">
        <van-button
            v-for="(item, index) in buttons"
            :key="index"
            :type="activeIndex === index? 'info' : 'default'"
            @click="handleClick(index)"
            v-model="form.energyType">
          {{item}}
        </van-button>
      </div>
      <div style="border: #2c3e50 2px solid;width: 340px; margin-left: 15px;border-radius: 10px;margin-bottom: 30px">
        <van-cell title="选择日期" :value="form.queryTime" @click="show = true" />
        <van-calendar v-model="show" :min-date="minSelectedDate" @confirm="onConfirm" />
      </div>
      <div  style="position: absolute;top:185px;left: 15px;width: 150px;height: 30px;">
        <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
        各分项用能统计
      </div>
      <div  style="position: absolute;top:620px;left: 15px;width: 150px;height: 30px;">
        <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
        各分项用能占比
      </div>
    </div>

    <div ref="echartsRef" style="width: 360px; height: 400px;"></div>

    <div ref="echartsRef2" style="width: 360px; height: 400px;"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
  data(){
    return{
      form:{
        energyType:"电",
        queryTime:"2024-11-25"
      },
      buttons: ['电', '水', '燃气'],
      activeIndex: 0,
      show: false,
      allItem:[],
      minSelectedDate: new Date('2024-10-01'),
      pieChartItem:[]
    }
  },
  methods:{
    findPieChartItem(){
      axios.post("http://localhost:9999/subitemUsage/findPieChartItem",this.form).then(res=>{
        this.pieChartItem = [];
        this.pieChartItem = res.data;
        this.initChart2();
      })
    },
    findAllItem(){
      axios.post("http://localhost:9999/subitemUsage/findAllItem",this.form).then(res=>{
        this.allItem = [];
        this.allItem = res.data;
        this.initChart();
      })
    },
    startAll(){
      this.findAllItem();
      this.findPieChartItem();
    },
    initChart() {
      const chartDom = this.$refs.echartsRef;
      const myChart = echarts.init(chartDom);
      // 配置图表选项
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        series: [
          {
            name: '照明耗能',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: this.allItem[0]
          },
          {
            name: '空调耗能',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: this.allItem[1]
          },
          {
            name: '动力耗能',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: this.allItem[2]
          },
          {
            name: '特殊耗能',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: this.allItem[3]
          },
        ]
      };
      myChart.setOption(option);
    },
    initChart2() {
      const chartDom = this.$refs.echartsRef2;
      const myChart = echarts.init(chartDom);
      // 配置图表选项
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top:'10%',
          left: 'center'
        },
        series: [
          {
            name: '耗能',
            type: 'pie',
            radius: '50%',
            data: this.pieChartItem,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    formatDate(date) {
      return `${date.getYear()+1900}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.form.queryTime = this.formatDate(date);
      this.startAll();
    },
    handleClick(index) {
      this.activeIndex = index;
      this.form.energyType = this.buttons[index];
      this.startAll();
    },
    toHead(){
      this.$router.push('/overview')
    }
  },
  created(){

  },
  mounted(){
    this.startAll();
  }
}
</script>

<style scoped>
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 70px;
}
</style>
